﻿<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>立体四子棋</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Connect Four game in JS + Canvas. Play against artificial intelligence or with other human offline or online!"
    />
    <link rel="canonical" href="https://kenrick95.github.io/c4/" />
    <meta property="og:url" content="https://kenrick95.github.io/c4/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="立体四子棋" />
    <meta
      property="og:description"
      content="Connect Four game in JS + Canvas. Play against artificial intelligence or with other human offline or online!"
    />
  </head>

  <body>
    <header class="header">
      <h1 class="header-title">立体四子棋</h1>
    </header>
    <section class="section">
      <div class="section-message"></div>
      <canvas class="section-canvas"></canvas>
    </section>

    <dialog class="init-screen">
      <h1>立体四子棋</h1>
      <h2>怎么玩？</h2>
      <p>四子棋是一款双人游戏。</p>
      <p>
        玩家轮流将彩色棋子投入棋盘中的某一列，棋子会落到该列中下一个空行。
      </p>
      <p>
        首先在水平、垂直或斜线上形成连续四个棋子的玩家获胜。如果棋盘被填满但无人达成四连，则为平局。
      </p>
      <p>
        更详细的规则说明，请参考
        <a href="https://en.wikipedia.org/wiki/Connect_Four" target="_blank"
          >维基百科上的四子棋介绍</a
        >。
      </p>
      <h2>游戏设置</h2>
      <form method="dialog" class="game-settings-form">
        <div class="game-settings-form-section">
          游戏模式：
          <ul class="game-settings-mode-list">
            <li>
              <label
                ><input
                  class="game-settings-mode-input"
                  type="radio"
                  name="mode"
                  value="offline-ai"
                  checked
                  autofocus
                />
                单机：玩家 vs AI</label
              >
            </li>
            <li>
              <label
                ><input
                  class="game-settings-mode-input"
                  type="radio"
                  name="mode"
                  value="offline-human"
                />
                单机：玩家 vs 玩家</label
              >
            </li>
            <li>
              <label
                ><input
                  class="game-settings-mode-input"
                  type="radio"
                  name="mode"
                  value="ai-vs-ai"
                />
                观战：AI vs AI</label
              >
            </li>
            <li>
              <label
                ><input
                  class="game-settings-mode-input"
                  type="radio"
                  name="mode"
                  value="online-human"
                />
                联网：玩家 vs 玩家</label
              >
            </li>
          </ul>
        </div>
        <label class="game-settings-player-1-name-label" for="player-1-name">
          玩家名称：
        </label>
        <input
          type="text"
          class="game-settings-player-1-name-input"
          value="玩家一"
          name="player-1-name"
          placeholder="玩家一"
        />
        <label class="game-settings-player-2-name-label" for="player-2-name">
          玩家名称：
        </label>
        <input
          type="text"
          class="game-settings-player-2-name-input"
          value="玩家二"
          name="player-2-name"
          placeholder="玩家二"
        />
        <button class="game-settings-submit" type="submit" value="confirm">
          开始游戏
        </button>
      </form>
    </dialog>
    <div class="statusbox hidden">
      <div class="statusbox-body">
        <div class="statusbox-body-connection">...</div>
        <div class="statusbox-body-game">...</div>
        <div class="statusbox-body-player">...</div>
      </div>
      <div class="statusbox-controls">
        <button class="hidden statusbox-button-back">结束游戏</button>
      </div>
    </div>

    <dialog class="message-body">
      <form method="dialog" class="message-form">
        <div class="message-body-content"></div>
        <button class="message-body-dismiss" type="submit" value="ok">
          确定
        </button>
      </form>
    </dialog>
    <footer class="footer">
      作者 <a href="http://kenrick95.org">Kenrick95</a>。代码仓库地址：
      <a href="https://github.com/kenrick95/c4">GitHub</a>.
    </footer>
    <script type="module" src="./src/app.ts"></script>
  </body>
</html>
